<template>
  <div class="flexarea">
    <div class="left">
      <div class="top">
        <span>考试基本信息</span>
      </div>
      <div class="middle">
        <span class="middlecontext">题目总数：{{ count }} 题</span>
        <span class="middlecontext">考试时长：{{ time }} 分钟</span>
        <span class="middlecontext">开始时间：{{ start }}</span>
        <span class="middlecontext">结束时间：{{ end }}</span>
      </div>
      <div class="leftbutton" @click="goToPaper(examId)" v-if="status === '未发布' && !hasQuestion">增加题目</div>
      <div class="leftbutton" style="color: red; border-color: red" @click="deletePaperDialogVisible = true" v-if="status === '未发布'">删除</div>
      <div class="leftbutton" @click="back()">返回</div>
    </div>
    <div class="right">
      <div class="top">
        <span style="margin-left: 20px;letter-spacing:5px">沉着冷静，仔细认真</span>
      </div>
      <div class="middle">
        <div v-for="(item, index) in radioList" v-bind:key="item.id">
          <div class="stempos">
            <span class="number">{{ index + 1 }}</span>{{ item.stem }}
          </div>
          <div class="option">
            <el-radio-group v-model="radio">
              <el-radio disabled :label="1" ><span class="optiontext" >A. {{ item.options.A }}</span></el-radio>
              <el-radio disabled :label="2"><span class="optiontext">B. {{ item.options.B }}</span></el-radio>
              <el-radio disabled :label="3"><span class="optiontext">C. {{ item.options.C }}</span></el-radio>
              <el-radio disabled :label="4"><span class="optiontext">D. {{ item.options.D }}</span></el-radio>
            </el-radio-group>
          </div>
          <div class="answer">
            <span>参考答案： {{ item.answer }}</span>
          </div>
        </div>
        <div v-for="(item, index) in multipleList" v-bind:key="item.id">
          <div class="stempos">
            <span class="number">{{ index + radioList.length + 1 }}</span>{{ item.stem }}
          </div>
          <div class="option">
            <el-checkbox-group v-model="check">
              <el-checkbox disabled :label="1"><span class="optiontext">A. {{ item.options.A }}</span></el-checkbox>
              <el-checkbox disabled :label="2"><span class="optiontext">B. {{ item.options.B }}</span></el-checkbox>
              <el-checkbox disabled :label="3"><span class="optiontext">C. {{ item.options.C }}</span></el-checkbox>
              <el-checkbox disabled :label="4"><span class="optiontext">D. {{ item.options.D }}</span></el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="answer">
            <span>参考答案： {{ item.answer }}</span>
          </div>
        </div>
        <div v-for="(item, index) in fillingList" v-bind:key="item.id">
          <div class="stempos">
            <span class="number">{{ index + radioList.length + multipleList.length + 1 }}</span>{{ item.stem }}
          </div>
          <div class="inputpos">
            <el-input type="textarea" :rows="1" placeholder="请输入内容" v-model="textarea" :disabled="true"></el-input>
          </div>
          <div class="answer">
            <span>参考答案： {{ item.answer }}</span>
          </div>
        </div>
        <div v-for="(item, index) in shortAnswerList" v-bind:key="item.id">
          <div class="stempos">
            <span class="number">{{ index + radioList.length + multipleList.length + fillingList.length+ 1 }}</span>{{ item.stem }}
          </div>
          <div class="inputpos">
            <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="textarea" :disabled="true"></el-input>
          </div>
          <div class="answer">
            <span>参考答案： {{ item.answer }}</span>
          </div>
        </div>
      </div>
    </div>

    <!--  删除试卷  -->
    <el-dialog
      title="提示"
      :visible.sync="deletePaperDialogVisible"
      width="30%"
      center
    >
      本操作无法撤销，确定删除试卷吗？
      <span slot="footer" class="dialog-footer">
        <el-button @click="deletePaperDialogVisible = false">取 消</el-button>
        <el-button type="danger" @click="deletePaper">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {deletePaper, getQuestionList} from '../../../api/exam'
import {getExamById} from '../../../api/students'

export default {
  name: 'Paper',
  data () {
    return {
      hasQuestion: false, // 只能首次修改
      examId: 0,
      paperId: 0,
      status: '',
      deletePaperDialogVisible: false, // 删除题目
      count: 5, // 题目的总数
      start: '4月5日 9:00', // 开始时间
      end: '4月5日 12:00', // 结束时间
      time: 120, // 考试持续时间（分钟）
      number: 1, // 题号
      input: '', // 保存填空和简答的输入框
      radio: ['1'], // 保存单选题的选项
      check: ['1', '2'], // 保存多选题的选项
      radioList: [], // 单选题题目列表
      multipleList: [], // 多选题题目列表
      fillingList: [], // 填空题题目列表
      shortAnswerList: [], // 简答题题目列表
      questionTestList: [ // 测试题题目列表
        {
          answer: 'A',
          stem: '离散数学的定义是（）',
          optiona: '离散数学是研究离散量的结构及其相互关系的数学学科，是现代数学的一个重要分支',
          optionb: '离散数学是研究离散量的结构的数学学科，是现代数学的一个重要分支',
          optionc: '离散数学是研究离散量的相互关系的数学学科，是现代数学的一个重要分支',
          optiond: '离散数学是研究离散量的结构及其相互关系的数学学科，是现代数学的一个重要分支'
        },
        {
          answer: 'A',
          stem: '离散数学的定义是（）',
          optiona: '离散数学是研究离散量的结构及其相互关系的数学学科，是现代数学的一个重要分支',
          optionb: '离散数学是研究离散量的结构的数学学科，是现代数学的一个重要分支',
          optionc: '离散数学是研究离散量的相互关系的数学学科，是现代数学的一个重要分支',
          optiond: '离散数学是研究离散量的结构及其相互关系的数学学科，是现代数学的一个重要分支'
        },
        {
          answer: 'A',
          stem: '离散数学的定义是（）'
        },
        {
          answer: 'A',
          stem: '离散数学的定义是（）'
        }
      ]
    }
  },
  mounted () {
    this.examId = this.$route.query.examId
    this.paperId = this.$route.query.paperId
    this.getQuestions()
    this.getExamMes()
  },
  methods: {
    // 删除考试试卷
    deletePaper () {
      let that = this
      deletePaper(this.examId).then(res => {
        console.log(res)
        if (res.data.errorCode === 0) {
          that.hasPaper = false
          that.deletePaperDialogVisible = false
          that.paper = {}
          that.$message.success('删除成功')
          this.back()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 跳转编辑试卷
    goToPaper (examId) {
      this.$router.push({path: '/exam/questionAdd', query: {examId: examId}})
    },
    // 重回组卷页面
    back () {
      this.$router.go(-1)
    },
    getQuestions () {
      console.log(this.$route.query.paperId)
      let info = {
        index: 0,
        pageSize: 10,
        paperId: this.$route.query.paperId
        // paperId: 8
      }
      getQuestionList(info).then(res => {
        if (res.data.errorCode === 0) {
          var temp = res.data.data.list
          if (res.data.data.total === 0) {
            this.hasQuestion = false
          } else {
            this.hasQuestion = true
          }
          this.count = 0
          for (var item of temp) {
            var qstem = JSON.parse(item.questionStem)
            item.stem = qstem.stem
            item.options = qstem.options
            if (item.questionType === 'radio') {
              this.radioList.push(item)
              this.count = this.count + 1
            } else if (item.questionType === 'multiple') {
              this.multipleList.push(item)
              this.count = this.count + 1
            } else if (item.questionType === 'filling') {
              this.fillingList.push(item)
              this.count = this.count + 1
            } else if (item.questionType === 'shortAnswer') {
              this.shortAnswerList.push(item)
              this.count = this.count + 1
            } else {
              this.$message.error('数据库错误')
            }
          }
        } else {
          this.$message.info(res.data.message)
        }
      })
    },
    getExamMes () {
      getExamById(this.$route.query.examId).then(res => {
      // getExamById(8).then(res => {
        console.log(res.data)
        if (res.data.errorCode === 0) {
          this.start = res.data.data.startTime
          this.end = res.data.data.endTime
          var dateBegin = new Date(this.start)
          var dateEnd = new Date(this.end)
          var dateDiff = dateEnd.getTime() - dateBegin.getTime()
          var leave = dateDiff % (24 * 3600 * 1000 * 3600 * 1000)
          this.time = Math.floor(leave / (60 * 1000))
          this.status = res.data.data.status
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
/*global*/
.flexarea {
  display: flex;
  height: auto;
  background-color: #e5e4e9;
  padding-bottom: 25px;
}

/*left part*/
.left {
  width: 260px;
  height: 100%;
  margin: 0px 0px 10px 10px;
}

/*left-top*/
.left .top {
  display: flex;
  justify-content: space-around;
  padding: 40px 0px;
  border-radius: 10px;
  color: #131878;
  font-size: 20px;
}

/*left-middle*/
.left .middle {
  padding-bottom: 50px;
}

.left .middle .middlecontext {
  display: flex;
  justify-content: flex-start;
  margin-left: 15px;
  padding: 6px;
  border-radius: 10px;
  margin-bottom: 10px;
  color: #131878;
}

/*重回组卷页面按钮*/
.left .leftbutton {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  width: 240px;
  border: 2px solid #131878;
  border-radius: 10px;
  line-height: 50px;
  color: #131878;
  margin-top: 20px;
}

/*right part*/
.right {
  height: 100%;
  width: 800px;
  color: #000000;
  font-size: 18px;
  padding: 7px 10px;
}

/*提示栏*/
.right .top {
  padding-right: 30px;
  display: flex;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #fff;
  height: 50px;
  line-height: 50px;
  border: 5px solid #ffffff;
  border-radius: 10px;
}

/*right-middle*/
.right .middle {
  background-color: #fff;
  padding: 30px 0px;
  padding-top: 30px;
  border: 5px solid #ffffff;
  border-radius: 10px;
}

/*题干部分*/
.right .middle .stempos {
  margin-left: 60px;
  margin-right: 50px;
  text-align: left;
}

/*题号*/
.right .middle .number {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #000000;
  width: 20px;
  height: 20px;
  background-color: #eeeeee;
  border-radius: 5px;
  margin-right: 15px;
}

/*单选框组*/
.right .middle .option .el-radio-group {
  text-align: left;
  padding-left: 90px;
  padding-right: 50px;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.right .middle .option .el-radio-group label {
  color: #000000;
  font-size: large;
  white-space: normal;
  line-height: 30px;
}

.right .middle .option .optiontext {
  color: #000000;
  font-size: large;
}

/*多选题组*/
.right .middle .option .el-checkbox-group {
  text-align: left;
  padding-left: 90px;
  padding-right: 50px;
  display: flex;
  flex-direction: column;
  margin-top: 15px;
}

.right .middle .option .el-checkbox-group label {
  color: #000000;
  font-size: large;
  white-space: normal;
  line-height: 30px;
}

/*填空题、简答题输入框位置*/
.right .middle .inputpos{
  margin-left: 50px;
  margin-right: 50px;
  margin-top: 15px;
}

/*填空题、简答题输入框*/
.right .middle .inputpos .input {
  text-align: left;
  padding-left: 40px;
  padding-right: 40px;
}

/*参考答案*/
.right .middle .answer {
  color: #000000;
  font-size: 18px;
  text-align: left;
  background-color: #eeeeee;
  margin-left: 50px;
  margin-right: 50px;
  margin-bottom: 100px;
  margin-top: 30px;
  padding-left: 10px;
  padding-right: 10px;
  border: 10px solid #eee;
  border-radius: 10px;
}

</style>
